<template>
	<view class="wrap">
		<!-- 取还车网点 -->
		<view class="storeInfoBox">
			<view class="cityInfo" @click.stop="chooseCity(1)">
				<view v-if="differentStoresCar == 1" class="title">取车城市</view>
				<view v-else class="title">取还车城市</view>
				<view class="value">{{ takeCity }}</view>
			</view>
			<view class="addressInfo" @click.stop="chooseAddress(1)">
				<view v-if="differentStoresCar == 1" class="title">取车地点</view>
				<view v-else class="title">取还车地点</view>
				<view class="value">{{ takeAddress }}</view>
			</view>
			<view class="otherInfo">
				<view class="title">跨网点还车</view>
				<view style="margin-top: 10rpx;">
					<switch style="transform:scale(0.7)" :checked="differentStoresCar == 1 ? true : false"
						:color="businessNo==3?'#FF8643':'#009CF9'" @change="onChange" />
				</view>
			</view>
		</view>
		
		<template v-if="differentStoresCar == 1">
			<view class="storeInfoBox" style="margin-top: 20rpx;">
				<view class="cityInfo" @click.stop="chooseCity(2)">
					<view  class="title">还车城市</view>
					<view class="value">{{ returnCity }}</view>
				</view>
				<view class="addressInfo" @click.stop="chooseAddress(2)">
					<view class="title">还车地点</view>
					<view class="value">{{ returnAddress }}</view>
				</view>
			</view>
			
			
			<view class="diifTip" :class="{active: businessNo== 3}">如取还网点不一致,可能产生跨网点还车费</view>
		</template>
		

		<!-- 租赁时间 -->
		<view>
			<!-- 时间 -->
			<view class="timeBox" @tap="chooseTime">
				<view class="timeContent">
					<text class="time">{{ startTime|week }}</text>
					<text class="date">{{ takeCarDate }}</text>
				</view>
				<view class="duration">
					{{ duration }}
					<image style="display: block; width: 130rpx; height: 20upx;"
						src="../../static/home/duration_arrow.png"></image>
				</view>
				<view class="timeContent" style="align-items: flex-end;">
					<text class="time">{{ endTime|week }}</text>
					<text class="date">{{ returnCarDate }}</text>

				</view>
			</view>

			<!-- 立即选车 -->
			<view class="chooseCarBtn" :class="{active: businessNo == 3}" @tap="chooseCar">
				{{ type == 1 ? '确认修改' : '立即选车' }}
			</view>

			<!-- 是否上门取送车  // 取车类型(1到店取还车,2自助取还车,3上门送取车,4上门送车,5上门取车)’-->
			<view class="checkBox" v-if="differentStoresCar==1">
				<label @tap="checkBoxChange(2)">
					<checkbox :color="businessNo == 3 ? '#FF8643' : '#009CF9'" style="transform:scale(0.7)"
						:checked="checked2" />
					<text style="color: #333; font-size: 22upx;">上门取车</text>
				</label>
				<label style="margin-left: 50upx;" @tap="checkBoxChange(3)">
					<checkbox :color="businessNo == 3 ? '#FF8643' : '#009CF9'" style="transform:scale(0.7)"
						:checked="checked3" />
					<text style="color: #333; font-size: 22upx;">上门送车</text>
				</label>
			</view>
			<view class="checkBox" v-else>
				<label @tap="checkBoxChange(1)">
					<checkbox :color="businessNo == 3 ? '#FF8643' : '#009CF9'" style="transform:scale(0.7)"
						:checked="checked1" />
					<text style="color: #333; font-size: 22upx;">上门取送车</text>
				</label>
			</view>


		</view>
		<u-modal :show="show" title="提示" :content='alertContent' @confirm="show=false" @close="show=false"
			confirmText="知道了"></u-modal>
	</view>
</template>

<script>
	import {
		vehicleSelectionVerification
	} from "@/api/home-api";

	var moment = require('@/utils/moment.js');
	moment.locale('zh-cn');
	export default {
		name: 'appointmentInfo',
		data() {
			return {
				// rentalType : 1, //(1到店取还车,2自助取还车,3上门送取车,4上门送车,5上门取车)’
				// checked1: false,
				// checked2: false,
				// checked3: false,
				show: false,
				alertContent: '',
			}
		},
		props: {
			type: {
				type: Number,
				default: 0
			}
		},
		computed: {
			businessNo() {
				return this.$store.state.order.businessNo;
			},
			rentalType() {
				return this.$store.state.order.rentalType;
			},
			// 取车类型(1到店取还车,2自助取还车,3上门送取车,4上门送车,5上门取车)’
			checked1() {
				if (this.differentStoresCar == 2 && this.rentalType == 3) {
					return true;
				} else {
					return false;
				}
			},

			checked2() {
				if (this.differentStoresCar == 1 && (this.rentalType == 3 || this.rentalType == 5)) {
					return true;
				} else {
					return false;
				}
			},
			checked3() {
				if (this.differentStoresCar == 1 && (this.rentalType == 3 || this.rentalType == 4)) {
					return true;
				} else {
					return false;
				}
			},

			differentStoresCar() {
				return this.$store.state.order.differentStoresCar;
			},
			takeCity() {
				return this.$store.state.user.city;
			},
			takeCityCode() {
				return this.$store.state.user.cityCode;
			},
			takeAddress() {
				return this.$store.state.user.address;
			},
			returnCity() {
				return this.$store.state.user.returnCity;
			},
			returnCityCode() {
				return this.$store.state.user.returnCityCode;
			},
			returnAddress() {
				return this.$store.state.user.returnAddress;
			},
			startTime() {
				return this.$store.state.order.startTime;
			},
			takeCarDate() {
				return moment(this.startTime).format("MM月DD日 HH:mm");
			},
			endTime() {
				return this.$store.state.order.endTime;
			},
			returnCarDate() {
				return moment(this.endTime).format("MM月DD日 HH:mm");
			},

			duration() {
				const date1 = moment(this.startTime);
				const date2 = moment(this.endTime);
				const duration = date2.diff(date1, 'hour'); //相差的总小时数
				const days = Math.floor(duration / 24); //相差的天数
				const hours = duration % 24; //相差的小时数
				var offsetTime;
				if (hours > 0) {
					offsetTime = days + '天' + hours + '小时';
				} else {
					offsetTime = days + '天';
				}
				return offsetTime;
			}


		},
		methods: {

			onChange() {
				this.$store.commit('order/saveRentalType', 1);
				if (this.differentStoresCar == 2) {
					this.$store.commit('order/saveDifferentStoresCar', 1);
				} else {
					this.$store.commit("user/saveReturnCity", this.takeCity);
					this.$store.commit("user/saveReturnAddress", this.takeAddress);
					this.$store.commit("user/saveReturnCityCode", this.takeCityCode);
					this.$store.commit('order/saveDifferentStoresCar', 2);
				}
			},
			//选择城市 type 1取车 2还车
			chooseCity(type) {
				uni.navigateTo({
					url: '../../pagesA/city/city?type=' + type
				})
			},
			//选择地址 type 1取车 2还车
			chooseAddress(type) {
				uni.navigateTo({
					url: '../../pagesA/address/address?type=' + type
				})
			},
			//选择时间
			chooseTime() {
				uni.navigateTo({
					url: '../../pagesA/time/usecar-time'
				})
			},
			// 取车类型(1到店取还车,2自助取还车,3上门送取车,4上门送车,5上门取车)’
			checkBoxChange(type) {
				let rentalType = 1;
				if (type == 1) { //上门取还车
					if (this.checked1) {
						rentalType = 1;
					} else {
						rentalType = 3;
					}
				} else if (type == 2) { //上门取车

					if (this.checked2) {
						if (this.checked3) {
							rentalType = 4;
						} else {
							rentalType = 1;
						}
					} else {
						if (this.checked3) {
							rentalType = 3;
						} else {
							rentalType = 5;
						}
					}

				} else if (type == 3) { //上门送车
					if (this.checked3) {
						if (this.checked2) {
							rentalType = 5;
						} else {
							rentalType = 1;
						}
					} else {
						if (this.checked2) {
							rentalType = 3;
						} else {
							rentalType = 4;
						}
					}

				}
				this.$store.commit('order/saveRentalType', rentalType);
			},
			//选择车辆
			chooseCar() {
				if (this.differentStoresCar == 1) { //跨网点还车
					if (this.takeAddress == '请选择') {
						uni.$u.toast('请选择取车地址');
					} else if (this.returnAddress == '请选择') {
						uni.$u.toast('请选择还车地址');
					} else {
						this.vehicleSelectionVerification();
						// if (this.type == 1) {
						// 	this.$emit('confimChange');
						// } else {
						// 	uni.navigateTo({
						// 		url: '/pagesA/car/car-list'
						// 	})
						// }

					}
				} else { //不跨网点还车
					if (this.takeAddress == '请选择') {
						uni.$u.toast('请选择取还车地址');
					} else {
						this.vehicleSelectionVerification();
						// if (this.type == 1) {
						// 	this.$emit('confimChange');
						// } else {
						// 	uni.navigateTo({
						// 		url: '/pagesA/car/car-list'
						// 	})
						// }
					}
				}

			},
			//微信分
			wxPoint() {
				uni.navigateTo({
					url: '/pages/guide/guide?type=5'
				})
			},

			vehicleSelectionVerification() {
				vehicleSelectionVerification({
					tenantId: this.$store.state.user.tenantId,
					takeStoreId: this.$store.state.user.takeStoreId,
					alsoStoreId: this.$store.state.user.returnStoreId ? this.$store.state.user.returnStoreId : this
						.$store.state.user.takeStoreId,
					startTime: this.$store.state.order.startTime,
					endTime: this.$store.state.order.endTime,
					rentalType: this.$store.state.order.rentalType,
					takeLat: this.$store.state.user.takeCarLat,
					takeLon: this.$store.state.user.takeCarLng,
					alsoLat: this.$store.state.user.returnCarLat,
					alsoLon: this.$store.state.user.returnCarLng,
				}).then(res => {
					if (res.code == 200) {
						if (this.type == 1) {
							this.$emit('confimChange');
						} else {
							uni.navigateTo({
								url: '/pagesA/car/car-list'
							})
						}
					} else if (res.code == 505) {
						this.alertContent = res.msg;
						this.show = true;
					} else {
						this.$store.dispatch('order/getOrderTime');
					}
				}).catch(err => {

				})
			},


		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		position: relative;
		top: 10upx;
		display: flex;
		flex-direction: column;
		border-radius: 20rpx;
		padding: 20upx;
		background: linear-gradient(0deg, #EBF5FD 0%, #FFFFFF 20%, #FFFFFF 100%);
	}


	.storeInfoBox {
		display: flex;
		flex-direction: row;
		border-bottom: 1rpx solid $liner-color;
		padding-bottom: 16rpx;

		.cityInfo {
			width: 140rpx;
		}

		.addressInfo {
			margin-left: 15rpx;
			width: 380rpx;
		}

		.otherInfo {
			margin-left: 15rpx;
			width: 130rpx;
		}

		.title {
			color: #999;
			font-size: 24rpx;
		}

		.value {
			margin-top: 20rpx;
			color: #333;
			font-weight: bold;
			font-size: 28rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;

		}

	}

	.diifTip {
		margin-top: 20rpx;
		font-size: 22rpx;
		color: $main-color;

		&.active {
			color: #FF8643;
		}
	}

	.timeBox {
		margin-top: 20upx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.timeContent {
			display: flex;
			flex-direction: column;

			.date {
				color: $text-color-33;
				font-size: 30upx;
				font-weight: bold;
			}

			.time {
				margin-top: 10upx;
				color: $text-color-99;
				font-size: 24upx;
			}
		}

		.duration {
			color: $text-color-99;
			font-size: 24upx;
			text-align: center;
			width: 130rpx;
			position: relative;
			top: 20rpx;
		}

	}

	.checkBox {
		margin-top: 20rpx;
	}

	.chooseCarBtn {
		margin-top: 36rpx;
		width: 100%;
		height: 88upx;
		// background: linear-gradient(to right, #32ace9 0%, #176cfb 100%);
		background-image: url('https://qykh.shopec.com.cn/image-server/dz/home_chooseCar.png');
		background-size: 100% 100%;
		color: $bg-white-color;
		line-height: 88upx;
		text-align: center;
		border-radius: 10upx;
		// &.active {
		// 	background: linear-gradient(to right, #FFC580 0%, #FF8543 100%);
		// }
	}

	.wxTipsBox {
		display: flex;
		justify-content: space-between;
		font-size: 24upx;
		position: relative;

		&::before {
			content: '';
			display: block;
			height: 8upx;
			width: 8upx;
			border-radius: 4upx;
			background: $main-color;
			position: absolute;
			top: 6px;
			left: 6px;

		}

		&.active {
			&::before {
				background: #FF8643;
			}
		}

		.wxTips {
			position: relative;
			left: 15px;
			color: $text-color-33;
		}

		.lookUp {
			color: $main-color;

			&.active {
				color: #FF8643;
			}
		}

	}
</style>